<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>镇长日志 - 模拟经营游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 核心工具库 -->
    <script src="../../../js/core.js"></script>
    <!-- 清新浅色主题 -->
    <link rel="stylesheet" href="./css/mayor-log-tabbed-light.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav id="game-navbar">
        <div class="nav-content">
            <div class="nav-left">
                <i class="fa fa-gamepad"></i>
                <h1>镇长日志</h1>
            </div>
            <div class="nav-right">
                <a href="../games_list.html" class="nav-btn">
                    <i class="fa fa-arrow-left"></i>
                </a>
            </div>
        </div>
    </nav>

    <!-- 主标签页导航 - 底部固定 -->
    <div class="main-tabs-nav">
        <button class="main-tab active" data-tab="overview">
            <i class="fa fa-home"></i>
            <span>总览</span>
        </button>
        <button class="main-tab" data-tab="buildings">
            <i class="fa fa-building"></i>
            <span>建筑</span>
        </button>
        <button class="main-tab" data-tab="events">
            <i class="fa fa-bell"></i>
            <span>事件</span>
        </button>
        <button class="main-tab" data-tab="villagers">
            <i class="fa fa-users"></i>
            <span>村民</span>
        </button>
        <button class="main-tab" data-tab="logs">
            <i class="fa fa-history"></i>
            <span>日志</span>
        </button>
    </div>

    <!-- 游戏内容区域 -->
    <main id="game-container">
        <div class="loading-screen">
            <div class="loading-spinner"></div>
            <p style="color: #2D6A4F; font-weight: 600;">正在加载游戏数据...</p>
        </div>
    </main>

    <!-- 通知弹窗 -->
    <div id="notification" class="notification">
        <i id="notification-icon" class="fa fa-info-circle"></i>
        <div class="notification-content">
            <span id="notification-title" class="notification-title"></span>
            <span id="notification-message" class="notification-message"></span>
        </div>
    </div>

    <script>
        window.showNotification = function(message, title = '', type = 'info') {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notification-icon');
            const titleEl = document.getElementById('notification-title');
            const messageEl = document.getElementById('notification-message');

            if (!notification) return;

            titleEl.textContent = title || '';
            messageEl.textContent = message;

            const icons = {
                info: { class: 'fa-info-circle', color: '#6366F1' },
                success: { class: 'fa-check-circle', color: '#52B788' },
                error: { class: 'fa-exclamation-circle', color: '#E63946' },
                warning: { class: 'fa-exclamation-triangle', color: '#FB8500' }
            };

            const iconConfig = icons[type] || icons.info;
            icon.className = `fa ${iconConfig.class}`;
            icon.style.color = iconConfig.color;

            notification.classList.add('show');
            setTimeout(() => notification.classList.remove('show'), 3000);
        };
    </script>

    <script type="module">
        import gameManager from './js/game-manager-tabbed.js';

        document.addEventListener('DOMContentLoaded', async function() {
            try {
                await gameManager.init('game-container');
                setTimeout(() => {
                    showNotification('开始你的村庄管理之旅！', '欢迎', 'success');
                }, 1000);
            } catch (error) {
                console.error('游戏初始化失败:', error);
                showNotification('游戏初始化失败，请刷新页面重试', '错误', 'error');
            }
        });
    </script>
</body>
</html>
